Сусідні селектори
|
|
|
|
|
|
|||||||||
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|
Ні |
Помилки |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Опис
Сусідніми
називаються елементи веб-сторінки, коли вони слідують безпосередньо один за
одним в коді документу.
Синтаксис
E +
F { Опис правил стилю }
Для
управління стилем сусідніх елементів використовується символ плюса (+), який
встановлюється між двома селекторами E і F. Пропуски навколо плюса не
обов'язкові. Стиль при такому записі застосовується до елементу F, але тільки у
тому випадку, якщо він є сусіднім для елементу E і слідує відразу після нього.
Розглянемо декілька прикладів.
<p>Lorem
ipsum <b>dolor</b> sit amet.</p>
Тег
<B> являється дочорнимо по відношенню до тега <P>, оскільки він
знаходиться усередині цього контейнера. Відповідно <P> виступає батьком
<B>.
<p>Lorem
ipsum <b>dolor</b> <var>sit</var> amet.</p>
Теги
<VAR> і <B> ніяк не перекриваються і є сусідніми елементами. Те, що
вони розташовані усередині контейнера <P>, не впливає на їх відношення.
<p>Lorem
<b>ipsum </b> dolor sit amet, <i>consectetuer</i>
adipiscing <tt>elit</tt>.</p>
Сусідніми
тут являються теги <B> і <I>, а також <I> і <TT>. При
цьому <B> і <TT> до сусідніх елементів не відносяться через те, що
між ними розташований контейнер <I>.
Приклад
HTML 4.01CSS 2.1IE 6IE 7IE 8Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251"> <title>Сусідні селекторы</title> <style type="text/css"> B + I { color: red; /* Червоний колір тексту */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body></html>
Браузери
Браузер
Internet Explorer 7 не застосовує стиль, якщо між селекторами розташовується
коментар (B + /* плюс */ I).
